<%--
  Created by IntelliJ IDEA.
  User: JiangMingda
  Date: 2022/8/17
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>商品列表</title>
    <!-- 引入vue.js -->
    <script src="${pageContext.request.contextPath}/static/js/vue.min.js" type="text/javascript"></script>
    <!-- 解决浏览器生产提示信息 -->
    <script> Vue.config.productionTip = false </script>
    <!-- jquery.js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/ElementUI/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script defer="defer" type="text/javascript" src="${pageContext.request.contextPath}/static/js/ElementUI/index.js"></script>
    <style type="text/css">
        a{
            text-decoration: none;
            color: dodgerblue;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :model="goods"
                :data="goodsList"
                style="width: 100%"
                style="display: flex">
            <el-table-column
                    label="序号"
                    type="index"
                    width="100"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="名称"
                    prop="goodsName"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="数量"
                    prop="goodsNumber"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="单价/元"
                    prop="goodsPrice"
                    align="center">
            </el-table-column>

            <el-table-column>
                <template slot="header" slot-scope="scope" :inline="true">
                    <el-button style="color: #5bc0de" size="small" round @click="openInsertWindow">新增商品</el-button>
                    <el-input
                            style="width: 170px"
                            v-model="goods.goodsName"
                            size="mini"
                            @keyup.enter.native="loadData"
                            placeholder="输入商品关键字搜索">

                        <template slot="append"><a class="el-icon-search" href="#" @click="loadData"></a> </template>

                    </el-input>

                </template>
                <template slot-scope="scope">

                    <el-button
                            size="mini"
                            @click="editGoodsByGoodsName(scope.row)">Edit</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteGoodsByGoodsName(scope.row.goodsName,scope.row.goodsId)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <center>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="goods.page"
                        :page-sizes="[10, 20, 50]"
                        :page-size="goods.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>
        </center>
    </template>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            // 用户列表
            goodsList: [],
            // 查询用户数据
            goods: {
                page: 1,
                size: 10,
                goodsName: "",
            },
            // 总条数
            totalCount: 0,
            search:"",
        },
        methods: {
            // 新增商品
            openInsertWindow(){
                location.href = '${pageContext.request.contextPath}/insertGoods'
            },
            // 修改商品
            editGoodsByGoodsName(goods) {
                localStorage.setItem("updateGoods", JSON.stringify(goods))
                location.href = '${pageContext.request.contextPath}/editGoods'
            },
            // 删除商品
            deleteGoodsByGoodsName(goodsName,goodsId) {
                if (confirm("你确定要删除"+goodsName+"吗")){
                    var _this = this;
                    $.ajax({
                        url:'${pageContext.request.contextPath}/goods/goods/' + goodsId,
                        dataType:'json',
                        type:'delete',
                        contentType: false,
                        success:function (result) {
                            if (result.code == 200){
                                _this.$alert(result.msg + "刷新中...");
                                setTimeout(function () {
                                    location.reload();
                                },2000)
                            }else {
                                _this.$alert(result.msg + "刷新中...");
                                setTimeout(function () {
                                    location.reload();
                                },2000)
                            }
                        },error:function () {
                            _this.$message("删除商品服务器出错!");
                        }
                    })
                }
            },
            // 商品列表
            loadData() {
                var _this = this;
                $.ajax({
                    url: '${pageContext.request.contextPath}/goods/goods',
                    dataType: 'json',
                    type: 'get',
                    data: this.goods,
                    success: function (result) {
                        _this.totalCount = result.obj.total; // 总条数
                        _this.goods.page = result.obj.pageNum; // 当前页
                        _this.goods.size = result.obj.pageSize; // 页码大小
                        _this.goodsList = result.obj.list; // 数据
                    }, error: function () {
                        _this.$message("服务器出错了!");
                    }
                })
            },
            handleSizeChange(newSize) { // 页面大小发生变化执行的函数
                // newSize就是选中的页面显示的条数的大小
                this.goods.size = newSize;
                // 执行loadData函数，查询新内容
                this.loadData();
            },
            handleCurrentChange(newPage) { // 页码发生变化之后执行的函数
                // 把newPage赋值给原来的page
                this.goods.page = newPage;
                // 执行loadData函数，查询新内容
                this.loadData();
            }
        },
        mounted() { // 类似于文档加载事件
            // 调用loadData函数
            this.loadData();
        }
    })
</script>
</body>
</html>
